<template>
  <!-- 结算最外层容器组件 -->
  <view class="my-settle-container">
    <!-- 全选 -->
    <label class="radio" @click="changeAllState">
      <radio color="#C00000" :checked="isFullChecked"></radio>
      <text>全选</text>
    </label>
    <!-- 合计 -->
    <view class="amount-box">
      合计：<text class="amount">¥{{checkedGoodsAmount}}</text>
    </view>
    <!-- 结算 -->
    <view class="btn-settle" @click="settlement">
      结算({{checkedCount}})
    </view>
  </view>
</template>

<script>
  import { mapGetters, mapMutations, mapState } from 'vuex'
  
  export default {
    name:"my-settle",
    data() {
      return {
        
      };
    },
    computed: {
      ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
      ...mapGetters('m_user', ['addstr']),
      ...mapState('m_user', ['token']), // 用户登录成功之后的token
      ...mapState('m_cart', ['cart']),
      // 是否全选
      isFullChecked(){
        return this.total === this.checkedCount
      },
    },
    methods: {
      // vuex 辅助函数
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      // 全选和取消全选lable的事件处理函数
      changeAllState() {
        this.updateAllGoodsState(!this.isFullChecked)
      },
      // 结算按钮事件监听
      settlement() {
        console.log('结算按钮点击了')
        // 1. 是否勾选了商品
        if(!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')
        
        // 2. 是否选择了收获地址
        if(!this.addstr) return uni.$showMsg('请选择收获地址！')
        
        // 3. 用户是否登录
        if(!this.token) return uni.$showMsg('请先登录！')
        
        console.log('可以调用支付接口了')
        // 4. 支付订单
        this.payOrder()
      },
      // 支付订单
      async payOrder(){
        console.log('支付开始')
        // 构造生成订单所需参数
        const orderInfo = {
          // order_price: this.checkedGoodsAmount,
          order_price: 0.01,
          consignee_addr: this.addstr,
          goods: this.cart.filter(item => item.goods_state)
                          .map(item => ({goods_id: item.goods_id, goods_number: item.goods_count, goods_price: item.goods_price}) )
        }
        // 发起请求创建订单
        const {data: res} = await uni.$http.post('/my/orders/create', orderInfo)
        console.log('创建订单',res)
        if(res.meta.status !== 200) return uni.$showMsg('订单创建失败！')
        // 订单创建成功，拿到订单编号
        const orderNumber = res.message.order_number;
        console.log('订单创建成功，订单编号：', orderNumber)
        
        // 订单预支付
        const {data: res2} = await uni.$http.post('/my/orders/req_unifiedorder', {order_number: orderNumber})
        console.log('预支付',res2)
        if(res2.meta.status !== 200) return uni.$showMsg('预支付订单生成失败！')
        // 预支付成功，拿到支付信息
        const payInfo = res2.message.pay
        console.log('预支付成功，支付信息：', payInfo)
        
        // 发起微信支付
        // 调用 uni.requestPayment() 发起微信支付
        const [err, succ] = await uni.requestPayment(payInfo)
        console.log('微信支付', err, succ)
        if(err) return uni.$showMsg('订单未支付！')
        
         // 3.3 完成了支付，进一步查询支付的结果
         const { data: res3 } = await uni.$http.post('/my/orders/chkOrder', { order_number: orderNumber })
         // 3.4 检测到订单未支付
         if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
         // 3.5 检测到订单支付完成
         uni.showToast({
           title: '支付完成！',
           icon: 'success'
         })
      }
    }
  }
</script>

<style lang="scss">
  .my-settle-container{
    // 底部固定
    position: fixed;
    bottom: 0;
    // left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    border-top: 1px solid #efefef;
    
    .radio {
      display: flex;
      align-items: center;
    }
    
    .amount-box {
      .amount {
        color: #c00000;
      }
    }
    
    .btn-settle {
      height: 50px;
      min-width: 100px;
      background-color: #C00000;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    
  }
</style>
